<template>
	<view class="device" :style="{'padding-bottom':version == VERSION_TYPE.OFFICAL_VERSION?`calc(50px + env(safe-area-inset-bottom))`:''}">
		<g-navbar title="申领机器" :isShowBack="version == VERSION_TYPE.EXP_VERSION"/>
		<searchBar v-model="searchKeywords" @confirmSearch="confirmSearch" @clearSearch="clearSearch"/>
		<goodsList style="flex:1;overflow: hidden;" :searchKeywords="searchKeywords" ref="goodsListRef"/>
		<g-tabbar v-show="version == VERSION_TYPE.OFFICAL_VERSION"/>
	</view>
</template>

<script lang="ts" setup>
	import searchBar from './components/search-bar/searchBar.vue';
	import goodsList from './components/goods-list/goodsList.vue';
	import interceptor from '@/router/router.interceptor';
	import { onLoad } from '@dcloudio/uni-app';
	import {Ref,ref} from 'vue';
	import type {IGoodsListExpose} from './components/goods-list/types';
	import {VERSION_TYPE} from '@/enum/version';
	
	const searchKeywords:Ref<string> = ref('');
	
	onLoad(()=>{
		interceptor.beforeEach({ url: '/pages/device/device'})
	})
	
	const goodsListRef:Ref<IGoodsListExpose|null> = ref(null);
	
	const confirmSearch = ()=>{
		goodsListRef.value?.getGoodsListBySearchKeywords();
	}
	
	const clearSearch = ()=>{
		setTimeout(()=>{
			goodsListRef.value?.change();
		},100)
	}
</script>

<style scoped lang="scss">
	@import "./device.scss";
</style>